<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getcode, uselogin } from '../../service/login'

let router = useRouter()

// 表单
const ruleFormRef = ref()
const ruleForm = reactive({
  Tel: '',
  VerifyCode: ''
})
const checkCode = ref(false)
// 表单检验
const rules = reactive({
  Tel: [
    {
      required: true,
      message: '手机号不能为空',
      trigger: 'blur'
    },
    {
      // 自定义校验规则
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确格式的手机号码',
      trigger: 'blur'
    }
  ],
  VerifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    {
      validator(rule, value, callback) {
        if (!checkCode.value) {
          // 校验不通过
          return callback(new Error('验证码不正确'))
        } else {
          // 校验通过
          callback()
        }
      },
      trigger: 'blur'
    },
    { max: 4, message: '验证码为4位数字', trigger: 'blur' }
  ]
})
let loading = ref(false)
//验证码
const show = ref(true)
const count = ref('')
const timer = ref(null)
//验证码倒计时
const sendVerificationCode = () => {
  let TIME_COUNT = 60
  if (!timer.value) {
    count.value = TIME_COUNT
    show.value = false
    timer.value = setInterval(() => {
      if (count.value > 0 && count.value <= TIME_COUNT) {
        count.value--
      } else {
        show.value = true
        clearInterval(timer)
        timer.value = null
      }
    }, 1000)
  }
  getCodeData()
}

const getCodeData = () => {
  getcode({ Tel: ruleForm.Tel })
    .then((res) => {
      if (res.ResultCode == 105) {
        checkCode.value = true
      }
      if (res.ResultCode == 103) {
        ElMessage.error('获取验证码失败')
      }
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
// 登录
const login = async () => {
  if (localStorage.getItem('info')) {
    localStorage.removeItem('info')
  }
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      uselogin(ruleForm)
        .then((res) => {
          if (res.ResultCode == 105) {
            loading.value = false
            ElMessage.success('登录成功')
            localStorage.setItem('info', JSON.stringify(res.Rows))
            router.push({ path: `/processcontrol` })
          }
          if (res.ResultCode == 103) {
            loading.value = false
            ElMessage.error(res.Message)
          }
          show.value = true
          clearInterval(timer)
          timer.value = null
        })
        .catch((err) => {
          loading.value = false
          show.value = true
          clearInterval(timer)
          timer.value = null
          ElMessage.error(err)
        })
    }
  })
}
</script>
<template>
  <section class="login-form">
    <!-- /form -->
    <div class="content-wthree">
      <div class="login-name">
        <span class="name">欢迎使用易称云联</span>
        <span class="tag">PRO</span>
      </div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" status-icon>
        <el-form-item prop="Tel">
          <el-input
            size="large"
            prefix-icon="Iphone"
            placeholder="请输入手机号"
            v-model="ruleForm.Tel"
          />
        </el-form-item>
        <el-form-item prop="VerifyCode" class="checkCode">
          <el-input
            size="large"
            clearable
            v-model="ruleForm.VerifyCode"
            placeholder="输入验证码"
            prefix-icon="Lock"
          ></el-input>
          <el-button
            @click.stop="sendVerificationCode"
            size="large"
            type="primary"
            style="margin-left: 10px"
            v-if="show"
            >发送验证码</el-button
          >
          <el-button size="large" style="margin-left: 10px" type="info" v-if="!show" disabled
            >{{ count }}秒后重发</el-button
          >
        </el-form-item>
        <el-button type="primary" round size="large" @click="login" :loading="loading">
          登录
        </el-button>
      </el-form>
    </div>
  </section>
</template>

<style scoped lang="scss">
.login-form {
  position: relative;
  min-height: 100vh;
  z-index: 0;
  background: #e6e4eb;
  padding: 40px 40px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.content-wthree {
  width: 500px;
  height: 330px;
  margin: 0 auto;
  text-align: center;
  padding: 3em 3em;
  background: #fff;
  box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  h2 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 10px;
    font-weight: 900;
    color: #272346;
  }
  .login-name {
    line-height: 40px;
    margin-bottom: 15px;
    text-align: left;

    .name {
      font-size: 24px;
      font-weight: 900;
    }
    .tag {
      background: #1a66ff;
      color: #fff;
      border-radius: 5px;
      line-height: 27px;
      display: inline-block;
      height: 27px;
      padding: 0 7px;
      margin-left: 5px;
      font-size: 16px;
    }
  }
  button {
    font-size: 18px;
    color: #fff;
    background: #1a66ff;
    width: 100%;
    border: none;
    padding: 14px 15px;
    font-weight: 700;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
  }
  button:hover {
    background: #409eff;
  }
  .el-form-item {
    margin-bottom: 25px;
  }
  .checkCode ::v-deep .el-form-item__content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    .el-button {
      width: 160px !important;
    }
    .el-button--primary {
      color: #09aaff;
      background: none;
      border: 1px solid #09aaff;
    }
    .el-button--info {
      background: none;
      border: 1px solid #b8b8b8;
      color: #b8b8b8;
    }
  }
}
</style>
